<template>
	<view class="">
		<view class="search">
			<u-search v-model="keyword" :showAction="false" @search="search"></u-search>
		</view>
		<view class="list" v-for="item in list" :key="item.Id" @click.stop="clickItem(item)">
			<view class="list__head">
				<text>编辑于</text>
				<text style="margin-left: 10rpx;">{{item.UpdateTime}}</text>
			</view>
			<view class="list__body">
				<view class="list__body--img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="list__body--content">
					<view class="list__body--content-title">{{item.SubjectTitle}}</view>
					<view class="list__body--content-text">{{item.CoverContent}}</view>
				</view>
			</view>
			<view class="list__del" @click.stop="del(item)">删除</view>
		</view>
		<no-data text="暂无草稿" v-if="!list.length"></no-data>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import {sendBackFunction,formatImg,timestampFormat,entitiestoUtf16} from '@/common/custom_util.js';
	import NoData from '@/components/custom/no-data/no-data.vue';
	import empty from '@/static/theme/default/community/empty.png'
	
	export default {
		components: {
			NoData
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				list: [],
				keyword: ''
			}
		},
		onLoad() {
			this.getSubjectListInDraft()
		},
		onNavigationBarButtonTap() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认清空草稿箱中所有草稿吗？',
				success(res) {
					if(res.confirm) {
						that.clearSubjectInDraft();
					}
				}
			})
		},
		methods: {
			/**
			 * 获取我的草稿箱帖子列表
			 */
			getSubjectListInDraft() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectListInDraft',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						keyword: this.keyword
					},
					success(res) {
						res.forEach(item => {
							item.SubjectTitle = entitiestoUtf16(item.SubjectTitle)
							item.CoverContent = entitiestoUtf16(item.CoverContent)
							item.UpdateTime = timestampFormat(item.UpdateTime);
							item.image = item.CoverImages ? formatImg(item.CoverImages) : empty;
						})
						that.list = res;
					},
					fail() {
						uni.showToast({
							title: '获取草稿箱失败!',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 清空我的草稿箱列表
			 */
			clearSubjectInDraft() {
				let that = this;
				_custom.getDataJava({
					apiname: 'clearSubjectInDraft',
					code: 2,
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						uni.showToast({
							title: '清空草稿箱成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '清空草稿箱失败!',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 删除帖子
			 */
			flagDelSubjectById(v) {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDelSubjectById',
					code: 2,
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						subjectid: v
					},
					success(res) {
						uni.showToast({
							title: '删除草稿箱成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '删除草稿箱失败!',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 删除
			 * @param {Object} v
			 */
			del(v) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除草稿吗？',
					success(res) {
						if(res.confirm) {
							that.flagDelSubjectById(v.Id);
						}
					}
				})
			},
			/**
			 * 点击草稿
			 * @param {Object} v
			 */
			clickItem(v) {
				sendBackFunction('selectDraft',v)
			},
			search() {
				this.getSubjectListInDraft();
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		background-color: #fff;
		padding: 20rpx;
	}
	
	.list {
		height: 220rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;
		position: relative;
		
		&__head {
			font-size: 25rpx;
			color: #aaa;
			padding: 20rpx 0;
			height: 40rpx;
		}
		
		&__body {
			display: flex;
			height: 100rpx;
			
			&--img {
				margin-right: 20rpx;
				
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}
			
			&--content {
				flex: 1;
				font-size: 25rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				&-title {
					font-size: 30rpx;
					font-weight: bold;
				}
				
				&-text {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		
		&__del {
			position: absolute;
			right: 20rpx;
			top: 30rpx;
			font-size: 25rpx;
			color: #434343;
		}
	}
</style>
